<template>
  <div class="bottom-bar">
    <div class="check-content">
      <CheckButton class="check-box" 
        :ischecked="isSelectAll"
        @click.native="btnClick"/>
      <span>全选</span>
    </div>
    <div class="total-price">合计：{{totalPrice}} ￥</div>
    <div class="calculate">去结算({{length}})</div>
    
  </div>
</template>
<script>
import CheckButton from '@/components/content/checkbutton/CheckButton'
export default {
  name:'CartBottomBar',
  components:{
    CheckButton,
  },

  computed:{
    totalPrice(){
     return this.$store.state.cartList.filter(function(item,index){
        return item.ischecked==true;
      }).reduce(function(preValue,item){
        return preValue+item.price*item.count;
      },0).toFixed(2);
    },
    length(){
      return this.$store.state.cartList.filter(item=>{
        return item.ischecked==true;
      }).length;
    },
    //分两步：1设置状态 2 设置点击事件
    isSelectAll(){
      //长度为空，直接返回false
      if(this.$store.state.cartList.length===0) return false;
      //如果找到为false有值为真，取反
      return!this.$store.state.cartList.find(function(item){
        return !item.ischecked;
      })
    }
  },
    methods: {
    btnClick(){
      console.log("-----");
      //1 全部被选中,点击全选时候，把商品全改为不选中
      if(this.isSelectAll){
        //选中
        this.$store.state.cartList.forEach(element => {element.ischecked=false});
      }else{
        //商品中有没选中的或者全部没选中，点击全选时
        this.$store.state.cartList.forEach(element => {element.ischecked=true});
      }
    }
  },
}
</script>
<style scoped>
.bottom-bar{
  display: flex;
  height: 40px;
  width :100%;
  background-color: #eee;
  position: fixed;
  left: 0;
  bottom:49px;
  align-items: center;
  justify-content: space-between;
  
}
.check-content{
  margin-left:10px;
  height: 40px;
  display: flex;
  align-items: center;
  
}
.check-box{
  display: inline-block;
}
.total-price{
  margin-left: 20px;
}
.calculate{
background-color: red;
line-height: 40px;
height: 40px;
}
</style>